<template>
  <div class="set">
    <h4>绑定邮箱</h4>
    <p><span>已绑定邮箱:</span><span>{{ userEmail }}</span></p>
    <p>邮箱作为进身份验证的重要方式，请谨慎操作!</p>
    <p>
      <el-form ref="toBindFormRef" :rules="toBindRules" status-icon :model="toBind">
        <el-row :gutter="20">
          <el-col :span="8" v-show="showGetCode && !showNewEmail">
            <el-form-item prop="code" style="width: 100%">
              <el-input v-model="toBind.code" placeholder="请输入邮箱验证码">
                <template #append>
                  <input type="button" :plain="true" @click="getCode(1)" :disabled="!show"
                  style="width: 100%;height: 100%;border: 0;background: none;color: #ababab;cursor: pointer;"
                  :value="codeText"/>
                </template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-show="showNewEmail && !showGetCode">
            <el-form-item prop="email" style="width: 100%">
              <el-input v-model="toBind.email" placeholder="请输入新邮箱号"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-show="showNewEmail && !showGetCode">
            <el-form-item prop="code2" style="width: 100%">
              <el-input v-model="toBind.code2" placeholder="请输入新邮箱验证码">
                <template #append>
                  <input type="button" :plain="true" @click="getCode(2)" :disabled="!show"
                  style="width: 100%;height: 100%;border: 0; background: none;color: #ababab;cursor: pointer"
                  :value="codeText"/>
                </template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6" v-show="showNewEmail && !showGetCode">
            <el-form-item style="width: 100%">
              <el-button plain color="#2fa7b9" @click="toBindSubmit">提交</el-button>
            </el-form-item>
          </el-col>

          <el-col :span="12" v-show="!showNewEmail && showGetCode">
            <el-form-item style="width: 100%">
              <el-button plain color="#2fa7b9" @click="confirmCode">确认更换</el-button>
            </el-form-item>
          </el-col>

          <el-col :span="24" v-show="!showGetCode && !showNewEmail">
            <el-button plain color="#2fa7b9" @click="showGetCode = true" style="margin-left: 0">更换绑定邮箱</el-button>
          </el-col>

        </el-row>
      </el-form>
    </p>
  </div>
</template>

<script setup lang="ts">
import { ref,reactive,toRefs,onMounted,computed } from "vue";
import {useUserStore} from "../../../../store/modules/user.ts";
import {ElMessage} from "element-plus";
import {sendEmailApi, updateEmailApi, verifyCodeApi} from "../../../../api/system/user/user.ts";

const state = reactive({
  toBind: {
    // 旧密码输入的验证码
    code:'',
    email: '',
    // 新邮箱输入的验证码
    code2: ''
  }
})

// 获取登录用户信息
const { userInfo } = useUserStore()
// 计算属性，将邮箱中间位置换为星号
const userEmail = computed(() => {
  const { email } = userInfo;
  return email.substr(0,3) + '****' + email.substr(7)
})

// 时间计时器
const timer = ref(null);
// 获取验证码60秒倒计时
const TIME_COUNT = 60;
// 当前秒数
const count = ref(0);
// 获取验证码后点击按钮设置禁止状态
const show = ref(true);
// 获取验证码文本
const codeText = ref("获取验证码");
// 点击更改绑定邮箱，显示获取验证码框
const showGetCode = ref(false);
const showNewEmail = ref(false);

// 获取邮箱验证码
const getCode = async (type: number) => {
  debugger
  // 点击后倒计时60秒
  if (!timer.value) {
    count.value = TIME_COUNT;
    show.value = false;
    timer.value = setInterval(() => {
      if (count.value > 0 && count.value <= TIME_COUNT) {
        count.value--;
        codeText.value = count.value + 's';
      } else {
        show.value = true;
        window.clearInterval(timer.value);
        timer.value = null;
        codeText.value = '重新获取';
      }
    },1000)
  }

  const { data } = await sendEmailApi(state.toBind.email);
  if (data.code === 200) {
    ElMessage.success("验证码已经发送到您的邮箱，此验证码用户更换邮箱绑定，请勿将验证码告知他人!")
  } else {
    ElMessage.error("验证码发送失败，请稍后重试")
  }
}

const confirmCode = async () => {
  if (state.toBind.code != '') {
    const { data } = await verifyCodeApi(state.toBind.code);
    if (data.code == 200) {
      show.value = true;
      window.clearInterval(timer.value)
      timer.value = null;
      codeText.value = "获取验证码";
      showNewEmail.value = true;
      showGetCode.value = false;
    } else {
      ElMessage.error(data.msg)
      return false;
    }
  } else {
    ElMessage.error("验证码不能为空");
  }
}


// 提交新邮箱更换绑定
const toBindSubmit = async () => {
  if (state.toBind.code2 != '') {
    // 清除计时器
    show.value = true;
    window.clearInterval(timer.value)
    timer.value = null;
    codeText.value = "获取验证码";
    const { data } = await updateEmailApi(state.toBind.email,state.toBind.code2);
    if (data.code == 200) {
      ElMessage.success(data.msg)
    } else {
      ElMessage.error(data.msg)
      return false;
    }
  } else {
    ElMessage.error("按要求进行更换邮箱绑定操作!")
  }
}

const { toBind } = toRefs(state)
</script>

<style scoped>

</style>